import React from "react";

import PageContent from '../PageContent'

import { ajax ,showResultMessage} from '../common';

import {UIDataTableView} from '../uicomponents/UIDataComponentView';

import UIFormView from '../uicomponents/UIFormView';

/** 
 * 系统角色组管理
*/
export default class SysRoleGroupManageApp extends React.Component {

	render() {

		/**路由设置 */
		const pageContentMap = {
			'/': {
				text: '系统角色组列表',
				icon: '',
				getComponent: (owner, props) => {
					return (<SysRoleGroupListPanle {...props} key='sysRoleGroupList' />);
				}
			},
			'/configSysRoleGroup': {
				text: '配置系统角色组',
				icon: 'edit',
				getComponent: (owner, props) => {
					return (<SysRoleGroupConfigPanel {...props} key='configSysRolegroup' />);
				}
			},
		};

		return (
			<PageContent {...this.props} contentMap={pageContentMap} pageInstance={this} >
			</PageContent >
		);
	}
}

/** 
 * 系统角色组列表
*/
class SysRoleGroupListPanle extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			title: '',
		}
	}

	actionHandler = (actionEvent) => {
		const { tableRef, sysRoleGroupFormRef, selectSysRoleGroupIds } = this;
		return {
			refresh: () => {
				tableRef.loadData();
			},
			addSysRoleGroup: () => {
				this.setState({ title: '新增系统角色组' });
				setTimeout(() => {
					sysRoleGroupFormRef.openModal();
				});
			},
			editSysRoleGroup: () => {
				this.setState({ title: '编辑系统角色组' });
				setTimeout(() => {
					sysRoleGroupFormRef.openModal(() => {
						sysRoleGroupFormRef.setFormData(actionEvent.params);
					});
				});
			},
			closeDialog: () => {
				sysRoleGroupFormRef.closeModal();
			},
			doOk: () => {
				sysRoleGroupFormRef.getFormData((formData) => {
					const result = {};
					formData.type = 'ROLE_GROUP';
					ajax('SYSTEM/SYSROLE/saveSysRoleGroup', formData).then((data) => {
						if (data) {
							result.success = true;
							result.message = 'message.saveSuccess';
							sysRoleGroupFormRef.closeModal();
							tableRef.loadData();
						}
					}).catch(function (reason) {
						result.success = false;
						result.message = reason;
					}).finally(() => {
						//console.log(result);
						showResultMessage(result);
					});
				});
			},
			deleteSysRoleGroups: () => {
				const result = {};
				ajax('SYSTEM/SYSROLE/deleteSysRoleGroup', { ids: actionEvent.params != null ? [actionEvent.params.id] : selectSysRoleGroupIds }, (data) => {
					result.success = true;
					result.message = 'message.deleteSuccess';
					tableRef.loadData();
					showResultMessage(result);
				});
			},
			configSysRoleGroup: () => {

			}
		};
	}

	render() {

		const sysRoleGroupTableProps = {
			tableConfigId: 'sysRoleGroupListTable',
			selectMode: 'multi',
			dataUrl: 'SYSTEM/SYSROLE/querySysRoleGroupList',
			actionGroupId: 'sysRoleGroupListActionGroup',
			rowActionGroupId: 'sysRoleGroupRowActionGroup',
			searchFormId: 'sysRoleGroupQueryForm',
			autoLoad: true,
			actionHandler: this.actionHandler,
			onSelectChange: (selectRowKeys) => {
				this.selectSysRoleGroupIds = selectRowKeys;
			},
			ref: (inst) => {
				this.tableRef = inst;
			},
			setToolbarState: (topToolBar, selectedIds) => {
				if (selectedIds != null && selectedIds.length > 0) {
					topToolBar.enable('delete');
				}
				else {
					topToolBar.disable('delete');
				}
			}

		};

		const sysRoleGroupEditFormProps = {
			formConfigId: 'sysRoleGroupInfoEditForm',
			inPop: true,
			title: this.state.title,
			actionGroupId: 'defaultDiaoligActionGroup',
			destroyOnClose: true,
			actionHandler: this.actionHandler,
			ref: (inst) => { this.sysRoleGroupFormRef = inst },
		};

		return (
			<React.Fragment>
				<UIDataTableView {...this.props} {...sysRoleGroupTableProps} />
				<UIFormView  {...sysRoleGroupEditFormProps} />
			</React.Fragment>
		);
	}
}

/** 
 * 系统角色组配置
 * 
*/
class SysRoleGroupConfigPanel extends React.Component {
	constructor(props) {
		super(props);
		this.state = {

		};
	}

	actionHandler = (actionEvent) => {
		const { tableRef, chooseSysRoleTableRef, sysRoleGroup, selectSysRoleIds } = this;
		return {
			addSysRoleGroupRelation: () => {
				chooseSysRoleTableRef.openModal(() => {
					chooseSysRoleTableRef.loadData({ roleGroupId: sysRoleGroup.id });
				});
			},
			cancelChoose: () => {
				chooseSysRoleTableRef.closeModal();
			},
			addRelatedItems: () => {
				ajax('SYSTEM/SYSROLE/addSysRoleGroupRoles', { sysRoleGroupId: sysRoleGroup.id, sysRoleIds: selectSysRoleIds.join(',') }, (data) => {
					chooseSysRoleTableRef.closeModal();
					tableRef.loadData({ roleGroupId: sysRoleGroup.id });
				});
			},
			doDelete: () => {

				const { selectSysRoleRelateIds } = this;

				ajax('SYSTEM/SYSROLE/removeSysRoleGroupRoles', { sysRoleGroupId: sysRoleGroup.id, 'sysRoleIds': selectSysRoleRelateIds.join(',') }, (data) => {
					tableRef.loadData({ roleGroupId: sysRoleGroup.id });
				});
			}
		};
	}

	render() {

		const sysRoleGroupRelateRoleTableProps = {
			tableConfigId: 'sysRoleGroupRelateList',
			selectMode: 'multi',
			dataUrl: 'SYSTEM/SYSROLE/getSysRoleGroupRelatedRoles',
			actionGroupId: 'sysRoleGroupRelateActionGroup',
			autoLoad: false,
			actionHandler: this.actionHandler,
			onSelectChange: (selectRowKeys) => {
				this.selectSysRoleRelateIds = selectRowKeys;
			},
			ref: (inst) => {
				this.tableRef = inst;
			},
			setToolbarState: (topToolBar, selectedIds) => {
				if (selectedIds != null && selectedIds.length > 0) {
					topToolBar.enable('delete');
				}
				else {
					topToolBar.disable('delete');
				}
			},
			onLoadData: (component) => {
				const sysRoleGroup = component.props.location.state;
				this.sysRoleGroup = sysRoleGroup;
				component.loadData({ roleGroupId: sysRoleGroup.id });
			}
		};

		const chooseSysRoleTableProps = {
			inPop: true,
			title: '选择系统角色',
			width: 800,
			tableConfigId: 'sysRoleTable',
			selectMode: 'multi',
			dataUrl: 'SYSTEM/SYSROLE/querySysRoleGroupNoRoleList',
			actionGroupId: 'chooseRelatedItemListActionGroup',
			autoLoad: false,
			actionHandler: this.actionHandler,
			onSelectChange: (selectRowKeys) => {
				this.selectSysRoleIds = selectRowKeys;
			},
			ref: (inst) => {
				this.chooseSysRoleTableRef = inst;
			},
			setToolbarState: (topToolBar, selectedIds) => {
				if (selectedIds != null && selectedIds.length > 0) {
					topToolBar.enable('ok');
				}
				else {
					topToolBar.disable('ok');
				}
			},
		}

		return (
			<React.Fragment>
				<UIDataTableView {...this.props} {...sysRoleGroupRelateRoleTableProps} />
				<UIDataTableView key='chooseSysRole' {...chooseSysRoleTableProps} />
			</React.Fragment>
		);
	}

}